<template>
	<div class="enter-container">
		<div class="container-top">
			<TopWelcome :loginName="userInfo.userName" :groupName="userInfo.omDepts?.pollutionSourceName" />
		</div>
		<div class="menu-contain">
			<div v-if="loading" class="loading">加载中...</div>
			<div v-else-if="menuItems.length === 0" class="empty">暂无可用设施点检功能</div>
			<div v-else class="menu-box-contain">
				<div v-for="item in menuItems" :key="item.key" class="menu-box" @click="item.external ? goToExternal(item.path) : goTo(item.path)">
					<div class="menu-icon" :class="item.icon"></div>
					<div>{{ item.text }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import TopWelcome from '@/view/home/components/TopWelcome.vue'
import { getCurrentUser, buildZczjUrl } from '@/api/facilityCheck'
import { showToast } from 'vant'

export default {
	name: 'FacilityCheckEnter',
	components: { TopWelcome },
	setup() {
		const router = useRouter()
		const userInfo = ref({ omDepts: {} })
		const zczjUrl = ref('')
		const loading = ref(true)
		const menuItems = computed(() => {
			const dept = userInfo.value.omDepts || {}
			const list = []
			if (dept.existSzesisc === '1') {
				// 改为内部页面路由，便于统一风格与权限控制
				list.push({ key: 'selfInspection', icon: 'icon-zczj', text: '自查自纠', path: zczjUrl.value, external: true })
			}
			if (dept.existWateGovern === '1') {
				list.push({ key: 'water', icon: 'icon-s', text: '废水治理设施点检', path: '/form-manager/facility-check/water' })
			}
			if (dept.existAirGovern === '1') {
				list.push({ key: 'air', icon: 'icon-q', text: '废气治理设施点检', path: '/form-manager/facility-check/air' })
			}
			if (dept.existHhwStorge === '1') {
				list.push({ key: 'hhw', icon: 'icon-w', text: '固固危废贮存场所点检', path: '/form-manager/facility-check/hhw' })
			}
			// if (dept.existWateReuse === '1') {
			// 	list.push({ key: 'graywater', icon: 'icon-mw', text: '中水回用点检', path: '/form-manager/facility-check/graywater' })
			// }
			return list
		})

		const init = async () => {
			try {
				const info = await getCurrentUser()
				if (!info) {
					showToast('获取用户信息失败')
					return
				}
				if (info.omDepts?.existSzesisc === '1') {
					info.omDepts.existWateGovern = '0'
					info.omDepts.existAirGovern = '0'
					info.omDepts.existHhwStorge = '0'
				}
				userInfo.value = info
				zczjUrl.value = buildZczjUrl(info)
			} catch (e) {
				console.error(e)
				showToast('加载失败')
			} finally {
				loading.value = false
			}
		}

		// 内部路由跳转
		const goTo = (path) => {
			if (!path) {
				showToast('打开失败')
				return
			}
			router.push(path)
		}

		// 外链跳转（自查自纠）
		const goToExternal = (url) => {
			if (!url) {
				showToast('外链生成失败')
				return
			}
			// 新标签打开以避免单页路由覆盖
			window.open(url, '_blank')
		}

		onMounted(() => init())

		return {
			userInfo,
			zczjUrl,
			loading,
			menuItems,
			goTo,
			goToExternal,
		}
	},
}
</script>

<style lang="less" scoped>
.enter-container {
	background-color: #f7f7f7;
	min-height: 100vh;
}

.container-top {
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	position: relative;
}
.menu-contain {
	border-radius: 10px;
	padding: 10px 0 0 0;
	margin: 0px 16px 0 16px;
}
.menu-box-contain {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	grid-column-gap: 16px;
	grid-row-gap: 16px;
	padding-bottom: 20px;
}
.loading,
.empty {
	text-align: center;
	padding: 40px 0;
	color: #888;
}
.menu-box {
	background-color: #fff;
	height: 100px;
	text-align: center;
	border-radius: 10px;
	padding: 12px 0 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #202739;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	transition: all 0.25s ease;
	cursor: pointer;
	&:active {
		transform: scale(0.96);
	}
}
.menu-icon {
	width: 40px;
	height: 40px;
	margin: 8px auto 12px auto;
	background-size: 100%;
}
.icon-s {
	background-image: url('https://wx.ksepia.com/profile/mini-image/dj-s-01.png');
}
.icon-q {
	background-image: url('https://wx.ksepia.com/profile/mini-image/dj-q-01.png');
}
.icon-w {
	background-image: url('https://wx.ksepia.com/profile/mini-image/dj-w-01.png');
}
.icon-mw {
	background-image: url('https://wx.ksepia.com/profile/mini-image/dj-mw-01.png');
}
.icon-zczj {
	background-image: url('https://wx.ksepia.com/profile/mini-image/dj-zczj-01.png');
}
</style>
